<div id="content_header">
  <h3>New payment..</h3>
</div>

<script type="text/ng-template" id="invoiceConfirmation.html">
  <div class="modal-header">
    <h3 class="modal-title">Invoice Confirmation</h3>
  </div>
  <div class="modal-footer">
    <button class="btn btn-default" ng-click="print()">Print Invoice</button>
    <button class="btn btn-primary" ng-click="invoiceList()">Back to Pending Payments</button>
    <button class="btn btn-warning" ng-click="payConfirm()">Continue to Payment Confirmation</button>
  </div>
</script>

<!-- SLIDE PANEL - DISCOUNTS -->
<pageslide ps-size="550px" ps-speed="0.25" ps-auto-close="true" ps-open="psDiscounts">
  <div style="padding:20px">
    <h3>Manage Discounts - <small class="text-muted">{{ Disc.params.studentName }}</small> <a href="" ng-click="psDiscounts = !psDiscounts"><i class="simple-icon-close"></i></a></h3>
    <hr>
    <div class="row">
      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <div class="alert alert-danger" ng-show="errors.StudentDiscounts">
          <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
          <p>{{ errors.StudentDiscounts[0] }}</p>
        </div>
        <table class="table table-condensed table-hover">
          <thead>
            <tr>
              <th></th>
              <th>Name</th>
              <th>Amount</th>
              <th>Percentage</th>
            </tr>
          </thead>
          <tbody>
            <!-- <tr dir-paginate="discount in discounts | itemsPerPage: pagesize" total-items="Disc.totalItems" pagination-id="cust" ng-if="discount.Invoice"> -->
            <tr ng-repeat="discount in discounts" ng-if="!discount.Invoice">
              <td><input type="checkbox" ng-checked="checkSelected(discount.Id)" ng-click="toggleDiscount(discount)" ng-if="!discount.Invoice"></td>
              <td ng-class="{'text-muted': discount.Invoice}">{{ discount.DiscountType.Name }}</td>
              <td ng-class="{'text-muted': discount.Invoice}">{{ discount.Amount ? (discount.Amount | currency:'Rp. ') : '-' }}</td>
              <td ng-class="{'text-muted': discount.Invoice}">{{ discount.Percentage ? discount.Percentage+'%' : '-' }}</td>
            </tr>
          </tbody>
        </table>
        <!-- <dir-pagination-controls on-page-change="pageChangedDisc(newPageNumber)" template-url="views/templates/dirPagination.tpl.html"></dir-pagination-controls> -->
      </div>
    </div>
    <button class="btn btn-primary" ng-click="submitDiscount()">Submit</button>
  </div>
</pageslide>

<!-- SLIDE PANEL - CLIENT PANEL -->
<div style="padding:20px" id="formClient">
  <h3>Client Name <a href="" ng-click="psClient = !psClient"><i class="simple-icon-close"></i></a></h3>
  <hr>

  <!-- <form  name="studentForm" role="form" ng-submit="searchContacts()">
    <div class="form-group input-group">
      <input type="text" ng-model="customSelected" placeholder="type student name" typeahead="contact as (contact.Address + ' - ' + contact.ContactType.Name ) for contact in searchContacts($viewValue)" typeahead-loading="loadingLocations" typeahead-template-url="customTemplate.html" class="form-control" typeahead-on-select="onSelect($item, $model, $label)">
    </div>
  </form> -->
  <div class="row" ng-show="clients.length > 0">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <div class="row">
        <div class="col-xs-12 col-md-12 col-lg-12" dir-paginate="client in clients | itemsPerPage: pagesize" total-items="totalItems">
          <dl ng-if="valid(client)">
            <dt><a href="" ng-click="useThis(client)">{{ client.Name }}</a></dt>
            <dd class="text-muted"><i class="simple-icon-tag"></i> {{ client.Code }}</dd>
          </dl>
        </div>
      </div>
      <dir-pagination-controls on-page-change="pageChanged(newPageNumber)" template-url="views/templates/dirPagination.tpl.html"></dir-pagination-controls>
    </div>
    <hr>
  </div>
  <!-- <a href="" class="btn btn-primary" ng-click="openModal(payment)">New Detailed Contact</a> -->
</div>

<div class="row">

  <div class="col-sm-12">
    <form role="form" ng-submit="postPayment()">

      <!-- RECEIVED FROM -->
      <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6">
          <div class="form-group" ng-class="{ 'has-error': errors.ReceivedFrom}">
            <label class="required" for="payer">Received From</label>
            <div class="input-group">
              <input type="text" class="form-control" id="payer" placeholder="Invoice receiver" ng-model="newPayment.ReceivedFrom" ng-disabled="newPayment.Client.Id">
              <span class="input-group-btn">
                <a class="btn btn-default" pageslide="right" ps-speed="0.25" href="#formClient" ps-auto-close="true" ps-open="psClient" ng-click="psClient = !psClient" ng-show="!newPayment.Client.Id">
                  <span tooltip="Select Client as Sponsor">Or click here to add a <i class="simple-icon-user"></i> client as sponsor</span>
                </a>
                <a class="btn btn-default" ng-show="newPayment.Client.Id" ng-click="removeClient()">
                  <span tooltip="Remove Client"><i class="simple-icon-close"></i> Remove Client</span>
                </a>
              </span>
            </div>
            <error-widget field="errors.ReceivedFrom"></error-widget>
          </div>
        </div>
      </div>

      <!-- PAYMENT PLANNING -->
      <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
          <div class="form-group" ng-class="{ 'has-error': errors.PaymentStatus}">
            <label class="required" for="status">Payment Plan</label><br>
              <div ng-repeat="Status in Statuses" class="radio-inline">
                <label><input type="radio" name="status" ng-value="Status.Id" ng-model="newPayment.PaymentStatus">{{ Status.Label }}</label>
              </div>
            <error-widget field="errors.PaymentStatus"></error-widget>
          </div>
        </div>
      </div>

      <div class="panel panel-primary">
        <div class="panel-heading">
          <h4 class="panel-title">Items</h4>
        </div>
        <div class="panel-body">
          <table class="table table-striped table-condensed table-bordered">
            <thead>
              <tr>
                <th class="text-center">#</th>
                <th class="text-center">Student</th>
                <th class="text-center">Item</th>
                <th class="text-center">Qty</th>
                <th class="text-center">Discount</th>
                <th class="text-center">Total</th>
              </tr>
            </thead>
            <tbody>
              <tr ng-repeat="invoice in selectedInvoice track by invoice.Id">
                <td class="text-center">{{ $index + 1 }}<!--
                  <a href="" ng-click="openModal(payment)"><i class="simple-icon-tag"></i></a>
                  &nbsp
                  <a href="" ng-click="removeRow($index)"><i class="simple-icon-trash"></i></a>
                --></td>
                <td>
                  <span ng-if="invoice.PlacementTest"><strong>{{ invoice.PlacementTest.Student.FullName }}</strong> - {{ invoice.PlacementTest.Student.SID }}</span>
                  <span ng-if="invoice.Enrollment"><strong>{{ invoice.Enrollment.Student.FullName }}</strong> - {{ invoice.Enrollment.Student.SID }}</span>
                  <span ng-if="invoice.MakeUpTest"><strong>{{ invoice.MakeUpTest.Enrollment.Student.FullName }}</strong> - {{ invoice.MakeUpTest.Enrollment.Student.SID }}</span>
                </td>
                <td>
                  <span ng-if="invoice.InvoiceType === 0">
                    <small>
                      PT on {{ invoice.PlacementTest.DateTime | date:'fullDate' }}
                    </small>
                  </span>
                  <span ng-if="invoice.InvoiceType === 1">
                    <small>
                      {{ invoice.Enrollment.CourseSchedule.CourseName }}
                    </small>
                  </span>
                  <span ng-if="invoice.InvoiceType === 2">
                    <small>
                      <span class="label label-warning">MUT</span>
                      <strong>{{ MakeUpTestTypes[invoice.MakeUpTest.Type].Label }}</strong> {{ invoice.MakeUpTest.MakeUpTestSchedule.DateTime | date:'medium'  }}
                    </small>
                  </span>
                </td>
                <td class="text-center">{{ invoice.Quantity }}</td>
                <td class="text-right"><a href ng-click="manageDiscount(invoice)"><small>Manage Discount</small></a> {{ invoice.TotalDiscount ? (invoice.TotalDiscount | currency:'Rp. ') : 'No Discount'  }}</td>
                <td class="text-right">{{ invoice.TotalAmount | currency: 'Rp. ' }}</td>
              </tr>
            </tbody>
            <tfoot>
              <tr>
                <th colspan="5" class="text-right">Total</th>
                <th class="text-right">{{ newPayment.TotalAmount | currency: 'Rp. ' }}</th>
              </tr>
              <tr>
                <th colspan="5" class="text-right">Total Discount</th>
                <th class="text-right">{{ newPayment.TotalDiscount | currency: 'Rp. ' }}</th>
              </tr>
              <tr>
                <th colspan="5" class="text-right">Total Amount*</th>
                <th class="text-right">{{ (newPayment.TotalAmount - newPayment.TotalDiscount) | currency: 'Rp. ' }}</th>
              </tr>
              <tr>
                <th colspan="6" class="text-right"><small><i>*{{ (newPayment.TotalAmount - newPayment.TotalDiscount) | inWords }} rupiah</i></small></th>
              </tr>
            </tfoot>
          </table>
        </div>
      </div>

      <button type="submit" class="btn btn-primary">Save</button>
      <a ui-sref="^.list" class="btn btn-default">Cancel</a>
    </form>
  </div>

    <!-- <div class="form-group">
      <label for="">Student</label>
      <h5>
        <b><u>{{ student[0].FullName }}</u></b>
        <small><a href="" ng-click="resetStudent()">Change Student</a></small>
      </h5>
    </div> -->

    <!-- <a class="btn btn-primary pull-right" href="" ng-click="addRow()">Add Row</a> -->



    <!-- <pre>
      {{ paymentNew.payments }}
    </pre>
    <br>
    {{ total }} -->

</div>